<template>
    <div class="bg">
        <div class="loginq">
       <span class="ming">用户名</span> <input class="user" type="text" v-model="username" @blur="user_name" >
        <span class="ma">密 码</span><input class="user_pa" type="password" v-model="password" >
        <span class="mar">确认密码</span><input class="user_rpa" type="password" v-model="rpassword" >
        <input class="button" type="button" value="注册" @click="register">
    </div>
    </div>
    
</template>
<script>
export default {
    data(){
        return{
            username:'',
            password:'',
            rpassword:''
        }
    },
    methods:{
        user_name(){
            this.$http.get("/register/"+this.username).then(result=>{
                
                
                if (result.body.msg=='') {
                   return
                }
                else{
                    alert('用户名已存在')
                    this.username=''
                }
               
                
                
            })
        },
        register(){
            
                
                if(this.password == this.rpassword){
                    this.$http.post('/registeruser',{
                        username:this.username,
                        password:this.password
                
            })
            this.$router.push({path:'/home/login'})
            alert('注册成功，将为您跳转到登录界面')
            
                
                
            
            }
                
                
                   
                
                
                
            
        }
        
    }
}
</script>
<style lang="scss">
.bg{
    height: 900px;
    background-color: #fff;

    .loginq{
    position: relative;
    top: 200px;
    left: 600px;
    .user{
        height: 50px;
        width: 300px;
        border-radius: 10px;
        
    }
    .user_pa{
        height: 50px;
        width: 300px;
        position: absolute;
        top: 90px;
        left: 56px;
        border-radius: 10px;
       

    }
    .user_rpa{
        height: 50px;
        width: 300px;
        position: absolute;
        top: 180px;
        left: 56px;
        border-radius: 10px;
       

    }
    .ma{
        display: block;
        position: absolute;
        top: 100px;
    }
    .mar{
        display: block;
        position: absolute;
        top: 192px;
        left: -20px;
    }
    .button{
        position: absolute;
        top: 290px;
        left: 370px;
        width: 80px;
        border: 1px solid rgb(128, 64, 0);
        border-radius: 7px;
       
    }
}
}

</style>
